<template> 
  <el-card class="form-container" shadow="never">
    <!-- <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写弹窗基本内容"></el-step>
      <el-step title="填写活动页详情内容"></el-step>
    </el-steps> -->
    <home-pop-set
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @finishHomePop="finishHomePop"
     >
    </home-pop-set>
    <activity-detail-set
      v-show="showStatus[1]"
      v-model="productParam"
      :is-edit="isEdit"
      @finishCommit="finishCommit"
      >
    </activity-detail-set>
  </el-card>
</template>
<script>
  import ActivityDetailSet from './ActivityDetailSet';
  import HomePopSet from './HomePopSet';
  import {fetchList as fetchProductList} from '@/api/product';
  import {
    createFrame,
    updateFrame,
    getFrame,
    createFrameDetail,
    updateFrameDetail,
    getFrameDetail,

  } from '@/api/homePop'
  const defaultProductParam = {
      title:"",//首页弹窗内容设置
      startTime:"",
      endTime:"",
      ruleType: 1,
      showPic:"",
      bgPic:"",//活动页详情
      frameId:"",
      id:"",
      listProducts:[],
      listTitle:"",
      pic1:"",
      pic2:"",
      productList:[],//商品列表
  };
  const defaultListQuery = {
    keyword: null,
    pageNum: 1,
    pageSize: 10,
    productSn: null,
    productCategoryId: null,
    brandId: null
  };
  export default {
    name: 'HomePopDetail',
    components: {ActivityDetailSet, HomePopSet},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      },
      showStatus:{
          type:Array,
          default:[true,false]
      }
    },
    data() {
      return {
        active: 0,
        productParam: Object.assign({}, defaultProductParam),
        //showStatus: [true, false],
        listQuery: Object.assign({}, defaultListQuery),
      }
    },
    created(){
      if(this.showStatus[1]){
        if(this.isEdit){
          // fetchProductList(this.listQuery).then(response => {
          //   //this.listLoading = false;
          //   //this.productParam.productList = response.data.list;
          //   //this.total = response.data.total;
          //   return response.data.list
          // })
          getFrameDetail(this.$route.query.id).then(response=>{
              if(response.code == 200 && response.data){
                this.productParam = Object.assign(this.productParam,response.data);
                //this.productParam.listProducts.split("-");
                //this.productParam.productList = producList
              }
            });
        }
        // else{
        //   this.fetchProductList();
        // }
      }
      if(this.isEdit && this.showStatus[0]){
        getFrame(this.$route.query.id).then(response=>{
            if(response.code ==200 && response.data){
                this.productParam=Object.assign(this.productParam,response.data);
            }
        });
      };
    },
    methods: {
      getDepotList(){
        let self = this;
        fetchDepotList().then(res=>{
          if(res.code ==200 && res.data){
            self.productParam.depotList = res.data;
          }
        })
      },
      // fetchProductList(){
      //   fetchProductList(this.listQuery).then(response => {
      //     //this.listLoading = false;
      //     this.productParam.productList = response.data.list;
      //     //this.total = response.data.total;
      //   });
      // },
    //   hideAll() {
    //     for (let i = 0; i < this.showStatus.length; i++) {
    //       this.showStatus[i] = false;
    //     }
    //   },
    //   prevStep() {
    //     if (this.active > 0 && this.active < this.showStatus.length) {
    //       this.active--;
    //       this.hideAll();
    //       this.showStatus[this.active] = true;
    //     }
    //   },
    //   nextStep() {
    //     if (this.active < this.showStatus.length - 1) {
    //       this.active++;
    //       this.hideAll();
    //       this.showStatus[this.active] = true;
    //     }
    //   },
    finishHomePop(isEdit){
        this.$confirm('是否要提交该弹窗数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(isEdit){
            updateFrame(this.$route.query.id,this.productParam).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.$router.back();
            });
          }else{
            createFrame(this.productParam).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.$router.back();
              //location.reload();
            });
          }
        })
    },
      finishCommit(isEdit) {
        console.log(this.productParam);
        let param = this.productParam;
        this.$confirm('是否要提交该活动', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          delete param.showPic;
          delete param.startTime;
          delete param.endTime;
          delete param.frameUrl;
          delete param.title;
          param.frameId = this.$route.query.id;
          let listProducts = [];
          for(const item of param.productList){
            listProducts.push(item.id);
          }
          param.listProducts = listProducts.join("-");
          // if(!isEdit){
          //   param.listProducts = param.listProducts.join("-");
          // }
          console.log(param.listProducts);
          if(isEdit){
            console.log(param);
            updateFrameDetail(this.$route.query.detaiId,param).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.$router.back();
            });
          }else{
            delete param.id;
            delete param.productList;
            createFrameDetail(param).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.$router.back();
            });
          }
        })
      },
    }
  }
</script>
<style>
  .form-container {
    width: 800px;
  }
</style>